<!-- params: scrollerName, url, objectJumpToDetails-->

<template>
  <div id="scroller" class="scroller">
	  <scroller :on-refresh="refresh" :on-infinite="infinite" ref="myScroller">
		  <group id="scrollerList" class="scrollerList">
			  <cell class="scrollerListCell" v-for="(item,index) in items" :title="item.name" @click.native="jumpTo(item.id)" @touchstart.native="showDeleteButton(index, item)" @touchend.native="clearLoop(item.id)">
				  <img slot="icon" width="50" style="display:block;margin-right:5px;" src="../../../../../assets/profile/default_header.svg">
			  </cell>
		  </group>
	  </scroller>
  </div>
</template>

<script>
	import Vue from 'vue'
	import NetWorking from '../../../../utils/networking'
  import { Group, Cell, ConfirmPlugin, Tab, TabItem} from 'vux'
  import VueScroller from 'vue-scroller'
  Vue.use(VueScroller)
  Vue.use(ConfirmPlugin)

  const SIZE = 20
  export default {
    name: "scroller",
    components: {
      Group,
      Cell,
	    Tab,
	    TabItem
    },
	  props: ['url', 'objectJumpToDetails'],
    data() {
      return {
        offset: 0,
        limit: SIZE,
	      noMoreData: false,
        items: []
      }
    },
    methods:{
      refresh (done) {
        this.$refs.myScroller.finishPullToRefresh(true)
	      return
      },
      infinite (done) {
        if(this.noMoreData){
	        this.$refs.myScroller.finishInfinite(true)
	        return
        }else{
	        let _this = this
	        _this.offset += 1
	        NetWorking.doGet(
	        	this.url + '/pages',
		        null ,
		        {
			        params:{
				        offset: _this.offset,
				        limit: _this.limit
			        }
		        }
	        ).then(
		        response => {
			        let res = response.data
			        if (res.error_code == 0) {
				        if (res.page_info.list.length >= 0) {
					        _this.items.push.apply(_this.items, res.page_info.list)
					        _this.bottom += res.page_info.list.length
					        //set noMoreData flag to true if current size < limit
					        if (res.page_info.list.length < _this.limit) {
						        _this.noMoreData = true
						        //在没有更多数据的时候调用该函数，然后return，必须注意
						        _this.$refs.myScroller.finishInfinite(true);
						        return
					        }
				        }
			        }else{
				        alert(res.error_message)
			        }
			        done()
		        }
	        )
        }
      },
      jumpTo: function (id) {
        //组件间传递参数
        this.$router.push({ name: this.objectJumpToDetails, params: { id: id }})
      },
      showDeleteButton(index, object) {
        var _this = this;
        clearInterval(this.Loop); //再次清空定时器，防止重复注册定时器
        this.Loop = setTimeout(function() {
	          let thisObj = this
	          thisObj.$vux.confirm.show({
	            title: '系统提示',
	            content: '确认要删除吗?',
	            onConfirm () {
	              NetWorking.doDelete(
			            this.url,
			            null,
			            {
			              params: {
			                id: object.id
				            }
			            }
		            ).then(
		              response => {
		                let rs = response.data
				            if(rs.error_code == 0){
					            _this.items.splice(index, 1);
				            }else{
					            alert(rs.error_message);
				            }
		            }
	            )
            }
          })
        }.bind(this), 1000);
      },
      clearLoop(id) {
        clearInterval(this.Loop);
      }
    }
  }
</script>

<style>
	.customer {
	}
	.scrollerList {
		margin-top: 96px;
	}

	.scrollerListCell {
		padding: 0px 8px;
		margin-top: 0px !important;
	}

	.subtitle-customer{
		margin-top: 46px;
		position: relative;
		z-index: 99;
	}


</style>
